<style lang="less">
  .organization-profit-detail{
    .summary{
      border: 1px solid #dfe6ec;
      padding: 20px;
      background-color: moccasin;
      font-size: 20px;
      margin: 0px 0px 5px 0px;
    }
    .title {
      font-size: 35px;
      text-align: center;
      margin-bottom: 5px;
    }
  }
</style>

<template>
  <div class="organization-profit-detail">
    <div class="summary">
      <div class="title">{{title}}</div>
      <div class="columns">
      <div class="column is-2" style="width: 50px;" v-if="isBack">
        <el-button type="text" icon="el-icon-arrow-left" @click="back">返回</el-button>
      </div>
      <div class="column">
        网点名称：{{summary.organizationName}}
      </div>
      <div class="column" v-if="summary.countyName">
        管辖区域：{{summary.countyName}}
      </div>
      <div class="column">
        收益总额：{{summary.totalAmount || 0}}
      </div>
      <div class="column">
        已销帐总额：{{summary.chargeOffsTotalAmount || 0}}
      </div>
      <div class="column">
        剩余总额：{{(summary.totalAmount - summary.chargeOffsTotalAmount).toFixed(2)}}
      </div>
      </div>
    </div>
    <order-profit-statistics v-if="$route.query.activeName === 'first'" :filters="filters" profit="organizationAmount" exportUrl="/api/v2.0/admin/organization-profit-summaries-detail-export" type="order">
    <el-table-column label="合伙人信息" width="150">
      <template slot-scope="scope">
        <div>姓名：{{scope.row.partnerRealName}}</div>
        <div>性质：{{scope.row.partnerTypeName}}</div>
        <div>归属：{{scope.row.partnerAscription}}</div>
      </template>
    </el-table-column>
  </order-profit-statistics>
    <order-profit-statistics v-if="$route.query.activeName === 'second'" :filters="filters" profit="organizationAmount" exportUrl="/api/v3.0/admin/api/truck-load-organization-profit-summaries-detail-export" type="truckLoadOrder">
      <el-table-column label="合伙人信息" width="150">
        <template slot-scope="scope">
          <div>姓名：{{scope.row.partner.realName}}</div>
          <div>性质：{{scope.row.partnerTypeName}}</div>
          <div>归属：{{scope.row.partner.ascriptionCountyNames}}</div>
        </template>
      </el-table-column>
    </order-profit-statistics>
  </div>
</template>

<script>
import {getOrganizationProfitSummary, getAllOrganizationProfitSummariesByOrganizationIdVo} from '../../../api/organization/OrganizationProfitSummary';
import OrderProfitStatistics from '../OrderProfitStatistics.vue';

export default {
  name: 'OrganizationProfitDetail',
  componentName: 'OrganizationProfitDetail',
  components: {OrderProfitStatistics},
  props: {
    organizationId: {
      type: String,
      required: true
    },
    title: '',
    isBack: {
      type: Boolean
    },
    countyId: {
      type: String,
      default: null
    }
  },
  data () {
    return {
      filters: 'EQ_organization.id=' + this.organizationId,
      summary: {
        organizationName: null,
        countyName: null,
        totalAmount: 0,
        chargeOffsTotalAmount: 0
      }
    };
  },
  methods: {
    back () {
      this.$router.push('/settlement_platform/organization_profit_summary');
    }
  },
  mounted () {
    this.title = this.$route.query.title;
    if (this.countyId) {
      this.filters += ';EQ_shipmentsCountyId=' + this.countyId;
    }
    if (this.$route.query.activeName === 'first') {
      getOrganizationProfitSummary({
        organizationId: this.organizationId,
        countyId: this.countyId
      }).then(res => {
        if (res.data.successFlg) {
          this.summary = res.data.obj;
        } else {
          this.$message.error(res.data.errorMsg);
        }
      });
    } else if (this.$route.query.activeName === 'second') {
      getAllOrganizationProfitSummariesByOrganizationIdVo({
        organizationId: this.organizationId,
        countyId: this.countyId
      }).then((res) => {
        if (res.data) {
          this.summary = res.data;
        }
      });
    }
  }
};
</script>
